<template>
	<view class="page bgff py16 px40 login cbf">
		
		<view class="aliC mt40">
			<image class="r4 w84" src="/static/logo.jpg" mode="aspectFill"></image>
		</view>


		<view class="flex flexC pb12 mt40 borb">
			<image class="w32" src="/static/img/icon/phone.png" mode="widthFix"></image>
			<input v-model="mobile" class="flex1 pl12" type="number" placeholder="请输入您的手机号">
		</view>
		<view class="flex flexC pb12 pt20 borb">
			<image class="w32" src="/static/img/icon/pwd.png" mode="widthFix"></image>
			<input v-model="password" class="flex1 pl12" type="password" placeholder="请输入密码">
		</view>

		<view class="flex pb12  flexB">

			<navigator class="py12 flex1 dinline cf2 aliR" url="/pages/member/reset" hover-class="none">重置密码？</navigator>
		</view>


		<button @click="login" hover-class="none" class="bg41 r40 mt40 btn ">登录</button>

		<uni-popup ref="popup3" type="bottom">
			<view class="popup-content2">

				<view class="popup-btn" @click="clickRole(item)" v-for="item in rule">{{item}}</view>

				<view class="popup-btn" @click="$refs.popup3.close()">取消</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				mobile: '',
				password: '',
				code: '',
				rule: []
			};
		},

		onLoad() {
			var token = uni.getStorageSync("token");
			if (token != '') {
				var role = uni.getStorageSync("role");
				this.clickRole(role);
			}
		},
		onShow() {

		},
		methods: {

			clickRole(role) {
				uni.setStorageSync("role", role);

				 if (role == '商家') {
					uni.redirectTo({
						url: '../data/index'
					})
				}
			},

			checkRole() {

				if (this.rule.length == 1) {

					var role = this.rule[0];
					uni.setStorageSync("role", role);
					 if (role == '商家') {
						uni.redirectTo({
							url: '../data/index'
						})
					} 

				} else if (this.rule.length > 1) {
					this.$refs.popup3.open();
					return;
				} else {
					uni.showToast({
						title: "您不是代理商，商家，员工身份",
						icon: 'none'
					})
					return;
				}

			},

			close() {
				uni.switchTab({
					url: '../data/index'
				})
			},

			login() {

				if (this.mobile == '') {

					uni.showToast({
						title: "请输入手机号",
						icon: 'none'
					});
					return;
				}


				if (this.password == '') {

					uni.showToast({
						title: "请输入密码",
						icon: 'none'
					});
					return;
				}


				let that = this;
				let param = {
					mobile: this.mobile,
					password: this.password,
				};

				this.$api.login(param).then(res => {

					if (res.code == 1) {



						var shop = res.data.shop;

						var role = new Array();
					
						 if (shop == 1) {
							role.push("商家");
						} 
						
						that.rule = role;
						that.checkRole();

						uni.setStorageSync("token", res.data.token);
						uni.setStorageSync("avatar", res.data.avatar);
						uni.setStorageSync("username", res.data.username);
						uni.setStorageSync("mobile", res.data.mobile);
						
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		.btn {
			line-height: 80rpx;
		}

		.w84 {
			width: 208rpx;
			height: 208rpx;
			border-radius: 60rpx;
		}

		input {
			color: #000
		}

		.w20 {
			width: 40rpx;
		}

		.w32 {
			width: 64rpx;
		}

		.mt180 {
			margin-top: 200rpx;
		}


	}


	.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>
